<template>
	<div>
		<van-sticky class="search">
			<van-row>
				<van-col span="2" class="fan">
					<van-icon name="arrow-left" size="25" @click="$router.back()" />
				</van-col>
				<van-col span="22">
					<van-search
						shape="round"
						show-action
						v-model="keyword"
						placeholder="请输入搜索关键词"
					>
						<template #action>
							<van-button type="primary" @click="search" size="small"
								>搜索</van-button
							>
						</template>
					</van-search>
				</van-col>
			</van-row>
		</van-sticky>
		<van-sticky :offset-top="60" class="sticky">
			<van-tabs type="card">
				<van-tab title="推荐"> </van-tab>
				<van-tab title="新品"> </van-tab>
				<van-tab title="价格"> </van-tab>
			</van-tabs>
		</van-sticky>
		<van-list
			:offset="100"
			v-model="loading"
			:finished="finished"
			finished-text="------哦吼~没有了------"
			@load="onLoad"
		>
			<van-cell
				v-for="(item, idx) in result"
				:key="idx"
				style="margin-bottom: 30px"
				@click="goodsdeail(item.goodsId)"
			>
				<template #title>
					<p>{{ item.goodsName }}</p>
					<p>{{ item.goodsIntro }}</p>
					<p>￥{{ item.sellingPrice }}</p>
				</template>
				<template #icon>
					<van-image
						width="110"
						height="110"
						:src="'http://backend-api-01.newbee.ltd/' + item.goodsCoverImg"
					/>
				</template>
			</van-cell>
		</van-list>
	</div>
</template>

<script>
export default {
	data() {
		return {
			value: "",
			finished: false,
			loading: false, //是否处于加载状态，加载过程中不触发load事件
			result: [],
			// 搜索参数
			keyword: "",
			page: 1,
			orderBy: "",
		};
	},
	watch: {
		// keyword: function () {
		//   (this.finished = false), (this.loading = false), (this.result = []);
		//   this.page = 1;
		// },
	},

	created() {
		this.refresh();
	},

	// 去掉下面的图标
	destroyed() {
		this.$parent.showTabbar = true;
	},
	mounted() {
		this.$parent.showTabbar = false;
	},

	methods: {
		onLoad() {
			console.log("触底了");
			if (!this.finished) {
				this.page++;
				this.search();
			}
		},
		async refresh() {
			const { categoryId } = this.$route.query;
			console.log(categoryId);
			if (!categoryId && !this.keyword) {
				this.finished = true;
				this.loading = false;
				return;
			}
			const {
				data: { list },
			} = await this.$axios.get("/search", {
				params: {
					pageNumber: this.page,
					keyword: this.keyword,
					goodsCategoryId: categoryId,
					orderBy: this.orderBy,
				},
			});
			this.result = list;
			console.log(this.result);
			this.loading = false;
			// if (this.page >= list.totalPage) this.finished = true;
		},

		search() {
			// 加载时
			this.loading = true;
			this.refresh();
		},

		goodsdeail(id) {
			this.$router.push("/goods/" + id);
		},
	},
};
</script>
<style lang="scss" scoped>
.fan {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 54px;
	color: rgba(100, 148, 237, 0.753);
}
.btn-w {
	width: 100%;
	height: 26px;
}
.p-2 {
	color: aliceblue;
}
.van-button--primary {
	color: #fff;
	background-color: rgb(27, 174, 174);
	border: 1px solid rgb(27, 174, 174);
}
::v-deep .van-tabs__nav--card .van-tab {
	border-right: 1px solid rgb(27, 174, 174);
	color: rgb(27, 174, 174);
}

::v-deep .van-tabs__nav--card .van-tab.van-tab--active {
	color: #fff;
	background-color: rgb(27, 174, 174);
}
::v-deep .van-tabs__nav--card {
	box-sizing: border-box;
	height: 30px;
	margin: 0 16px;
	border: 1px solid rgb(27, 174, 174);
	border-radius: 2 px;
}
.van-image {
	margin-top: 10px;
}
.van-cell__title {
	margin-left: 10px;
	p {
		margin: 10px 0px;
	}
}
.search {
	width: 415px;
	height: 57px;
	background-color: #fff;
	z-index: 10;
}
.sticky {
	width: 415px;
	height: 30px;
	background-color: #fff;
	z-index: 10;
}
</style>
